<template>
  <!--专属二维码页面-->
  <div class="erweima">
    <div class="content">
      <ul>
        <li>此二维码涉及个人核销业绩，请妥善管理</li>
        <li>
          <img width="240" :src="employee.employeeQrCode"/>
          <span>{{employee.employeeName}}</span>
        </li>
        <li>
          <wv-button type="default" :plain="true" @click="goIndex()">返回</wv-button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {createQrcode} from '../../../test/unit/http'
  import {Toast} from 'we-vue'

  export default {
    name: '',
    props: {},
    data() {
      return {
        employee: {},
        airport: {}
      };
    },
    methods: {
      goIndex() {
        this.$router.go(-1);
      },
      createQrcode() {
        createQrcode({}).then(res => {
          console.log(res);
          if (res.code == 100) {
            this.employee = res.object.employee;
            this.airport = res.object.airport;
          } else {
            Toast.fail(res.info);
          }
        })
      }
    },
    created() {
      this.createQrcode();
    },
    components: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .erweima {
    height: 100vh;
    background-image: linear-gradient(to right, #fea538, #f27140);
  }

  .content {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -170px;
    margin-left: -120px;

    ul {
      li:first-child {
        color: #fff;
        font-size: 13px;
      }

      li:nth-child(2) {
        position: relative;
        margin: 15px 0 10px;

        span {
          color: #fff;
          font-size: 15px;
          font-weight: 700;
          background-color: #f98e3c;
          border-radius: 5px;
          position: absolute;
          width: 50px;
          height: 50px;
          line-height: 50px;
          left: 50%;
          top: 50%;
          margin-left: -25px;
          margin-top: -25px;
        }
      }

      li:last-child {
        button {
          background-color: #fff;
          color: #f98e3c;
          border: none;
          width: 242px;
          margin-bottom: auto;
        }
      }
    }
  }

</style>
